<template>
  <el-drawer
    class="basic-drawer body-flex"
    :model-value="visible"
    title="批量操作"
    size="900px"
    :close-on-click-modal="!submitBtn.loading"
    :close-on-press-escape="!submitBtn.loading"
    :show-close="!submitBtn.loading"
    @closed="active = '批量添加记录'"
    @update:model-value="emit('update:visible', $event)"
  >
    <el-tabs
      v-model="active"
      class="basic-tabs"
      :class="submitBtn.loading && 'pointer-events-none cursor-not-allowed'"
    >
      <el-tab-pane label="批量添加记录" name="批量添加记录"> </el-tab-pane>
      <el-tab-pane label="批量修改记录" name="批量修改记录"> </el-tab-pane>
      <el-tab-pane label="批量删除记录" name="批量删除记录"> </el-tab-pane>
    </el-tabs>
    <div v-if="visible" class="flex-1 w-full flex flex-col pt-2">
      <batch-add-log v-show="active === '批量添加记录'" class="batch-page" />
      <BatchEditLog v-show="active === '批量修改记录'" class="batch-page" />
      <BatchDeleteLog v-show="active === '批量删除记录'" class="batch-page" />
    </div>
    <template #footer>
      <el-button
        :loading="submitBtn.loading"
        :disabled="submitBtn.disabled"
        type="primary"
        class="w-[74px]"
        @click="handleSubmit"
        >{{ active.substring(2, 4) }}</el-button
      >
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import type { UserModel } from '@/apis/model/user'

import type { IBatchActive, SubmitBtn } from '../type'
import { DOMAIN_INPUT_PLACEHOLDER, SUBMIT_BTN_UPDATE } from '../utils/constants'
import BatchAddLog from './BatchAddLog.vue'
import BatchDeleteLog from './BatchDeleteLog.vue'
import BatchEditLog from './BatchEditLog.vue'

interface IProps {
  visible: boolean
  user?: UserModel
}

interface IEmits {
  (event: 'refresh'): void
  (event: 'update:visible', value: boolean): void
}

const emit = defineEmits<IEmits>()
const props = defineProps<IProps>()

const active = ref<IBatchActive>('批量添加记录')

const submitBtn = ref<SubmitBtn>({
  loading: false,
  disabled: false,
  onSubmit: async () => {}
})

const handleSubmit = async () => {
  await submitBtn.value.onSubmit()
  // http://192.168.2.253:777/view.php?id=8035
  // emit('update:visible', false)
  emit('refresh')
}

provide('user', toRef(props, 'user'))
provide('active', active)

provide(SUBMIT_BTN_UPDATE, (params: Partial<SubmitBtn>) => {
  Object.assign(submitBtn.value, params)
})

provide(
  DOMAIN_INPUT_PLACEHOLDER,
  '输入需要批量操作的域名，每行一个，最多添加1000个'
)
</script>

<style scoped lang="scss">
.batch-page {
  flex: 1;
  flex-basis: 0;
}
</style>
